<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户列表</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
        integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <link href="admin/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="admin/css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
    <link href="admin/css/animate.css" rel="stylesheet">
    <link href="admin/css/style.css?v=4.1.0" rel="stylesheet">

</head>

<body class="col-sm-12">
    <a href="./add.html" class="btn btn-info btn-sm" style="float:right;margin: 5px 0;">添加</a>
    <table class="table table-bordered table-striped table-hover">
        <thead>
            <tr>
                <td>序号</td>
                <td>名字</td>
                <td>性别</td>
                <td>地址</td>
                <td>电话</td>
                <td>邮箱</td>
                <td>描述</td>
                <td>操作</td>
            </tr>
        </thead>
        <tbody id="con">
        </tbody>
    </table>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js">
    </script>
    <script>
        var Ocon = document.getElementById("con")
        axios.get("/api/users").then((res) => {
            console.log(res.data)
            var str = "";
            res.data.forEach((items, index) => {
                str += `  <tr>
                <td>${index + 1}</td>
                <td>${items.name}</td>
                <td>${items.sex}</td>
                <td>${items.address}</td>
                <td>${items.phone}</td>
                <td>${items.email}</td>
                <td>${items.desc}</td>
                <td>
                <a class="btn btn-info btn-sm" href="/updata.html?id=${items._id
                    }">修改</a>
                <button class="btn btn-danger btn-sm" data-id="${items._id
                    }">删除</button>
                    </td>
            </tr>`
            });
            Ocon.innerHTML = str;
            $("button").click(function () {
                let id = $(this).attr("data-id")
                delOne(id);
            })
        })


        async function delOne(id) {
            console.log(id)
            if (confirm("是否确定要删除？")) {
                await axios.delete("/api/users/" + id).then((res) => {
                    if (res.data.code == 1) {
                        location.reload();
                    }
                });
            }
        }
    </script>

</body>

</html>